<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    ecdata: ''
  },
  data() {
    return {
      color: ["#00AFC3"],
      chart: null
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        backgroundColor: "#FFF",
        color: this.color,
        // 提示框组件
        // tooltip: {
        //   // 触发类型
        //   // trigger: "axis",
        //   // 提示框添加单位  默认无单位
        //   formatter(p) {
        //     var y_name = p[0].name
        //     p.forEach((item, index) => {
        //       if (index === that.origin.length) {
        //         return
        //       }
        //       y_name += `<p>${item.marker}${item.seriesName}：${
        //         item.value === undefined ? "-" : item.value
        //         } 个</p>`
        //     })
        //     return y_name
        //   }
        // },
        // // 鼠标悬浮到图上，可以出现标线和刻度文本。
        // axisPointer: {
        //   // 是否显示
        //   show: true,
        //   // 标线样式
        //   lineStyle: {
        //     // 线的类型 可选'solid' 'dashed''dotted'
        //     type: "dashed",
        //     // 线颜色
        //     color: "#000"
        //   },
        //   // 坐标轴指示器的文本标签。
        //   label: {
        //     // 是否显示
        //     show: true,
        //     // 文本颜色
        //     color: "#fff",
        //     // 指示器北京颜色
        //     backgroundColor: "rgba(0, 0, 0, 1)"
        //   }
        // },
        // // 直角坐标系内绘图网格
        // grid: {
        //   // grid 组件离容器左侧的距离。默认10%
        //   left: 50,
        //   // grid 组件离容器右侧的距离。默认10%
        //   right: 10,
        //   // grid 组件离容器下侧的距离。默认60px。值可以是像60这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
        //   bottom: 80
        // },
        // 图例组件。
        // legend: {
        //   // 图例标记的图形宽度。默认25px
        //   itemWidth: 20,
        //   // 图例标记的图形高度。默认14px
        //   itemHeight: 10,
        //   // 图例的公用文本样式。
        //   textStyle: {
        //     // 文字颜色
        //     color: "#90979c",
        //     // 文字大小
        //     fontSize: "12"
        //   },
        //   // 图例的数据数组
        //   data: that.origin?that.origin.map((item, index) => {
        //     return { name: item.name, icon: "roundRect" }
        //   }):[]
        // },
        // dataZoom 组件 用于区域缩放
        dataZoom: [
          {
            show: true,
            height: 50,
            bottom: 0,
            start: 0,
            end: 100,
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#999"
            }
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 0,
            end: 6
          }
        ],
        // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
        // xAxis: [
        //   {
        //     // 是否显示
        //     show: true,
        //     // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
        //     scale: true,
        //     // 坐标轴类型
        //     type: "category",
        //     // 坐标轴轴线相关设置
        //     axisLine: {
        //       // 坐标轴样式
        //       lineStyle: {
        //         // 坐标轴颜色
        //         color: "#000000"
        //       }
        //     },
        //     // 坐标轴刻度相关设置
        //     axisTick: {
        //       // 是否显示坐标轴刻度
        //       show: false
        //     },
        //     // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
        //     // boundaryGap: false,
        //     // 坐标轴刻度标签的相关设置
        //     axisLabel: {
        //       // 坐标轴刻度颜色
        //       color: "#000000"
        //     },
        //     // 类目数据，在类目轴（type: 'category'）中有效
        //     data: that.origin[0]&&that.origin[0].time?that.origin[0].time.map((item, index) => {
        //       return item
        //     }):null
        //   }
        // ],
        // // 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
        // yAxis: [
        //   {
        //     // 坐标轴名称。
        //     name: "个",
        //     // 坐标轴名称的文字样式。
        //     nameTextStyle: {
        //       padding: [0, 20, 20, 0]
        //     },
        //     // 坐标轴类型
        //     type: "value",
        //     // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
        //     scale: true,
        //     // 坐标轴在 grid 区域中的分隔线
        //     splitLine: {
        //       // 是否显示
        //       show: true,
        //       lineStyle: {
        //         color: "#e5e5e5",
        //         //分隔线的类型 可选'solid' 'dashed''dotted'
        //         type: "dotted"
        //       }
        //     },
        //     // 坐标轴轴线相关设置。
        //     axisLine: {
        //       // 是否显示
        //       show: true,
        //       lineStyle: {
        //         // 坐标轴线线的颜色。
        //         color: "#000000"
        //         // 坐标轴线线的宽度
        //         // width: 1
        //       }
        //     },
        //     // 坐标轴刻度相关设置
        //     axisTick: {
        //       // 是否显示坐标轴刻度
        //       show: false
        //     }
        //   }
        // ],

        // // 系列列表。每个系列通过 type 决定自己的图表类型
        // series:  that.origin?that.origin.map((item, index) => {
        //   return {
        //     // 折线/面积图
        //     type: "line",
        //     // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
        //     name: item.name,
        //     // 是否平滑曲线显示
        //     smooth: true,
        //     // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
        //     showSymbol: true,
        //     // 区域填充样式
        //     areaStyle: {
        //       normal: {
        //         color: new echarts.graphic.LinearGradient(
        //           0,
        //           0,
        //           0,
        //           1,
        //           [
        //             {
        //               offset: 0,
        //               color: this.r_color[index].a
        //             },
        //             {
        //               offset: 0.5,
        //               color: this.r_color[index].b
        //             },
        //             {
        //               offset: 1,
        //               color: "rgba(255, 255, 255, 0)"
        //             }
        //           ],
        //           false
        //         ),
        //         shadowColor: "rgba(0, 0, 0, 0.1)",
        //         shadowBlur: 10
        //       }
        //     },
        //     // 系列中的数据内容数组。数组项通常为具体的数据项。
        //     data: item.value?item.value.map((item, index) => {
        //       return item
        //     }):[]
        //   }
        // }):[]
        grid: {
          // grid 组件离容器左侧的距离。默认10%
          top: 60,
          left: 50,
          // grid 组件离容器右侧的距离。默认10%
          right: 50,
          // grid 组件离容器下侧的距离。默认60px。值可以是像60这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
          bottom: 80
        },
        tooltip: {
          // trigger: 'axis',
          showDelay: 0,
          formatter: function (params) {
            if (params.value.length > 1) {
              return (
                // `<div style='padding:10px'>
                // <span>${params.marker}</span>赵雄飞
                // <br/>
                // 赵 ${params.value[0]}kW
                // <br/>
                // 赵 ${params.value[1]}kW
                // </div>`
                `<div style='padding:10px'>
                <span>${params.marker}</span>
                需量：${params.value[0]} kW
                </div>`
              )
            }
            else {
              let name = ''
              if (params.color === '#FF9200') {
                name = '最低申报需量'
              } else if (params.color === '#B06EF3') {
                name = '平衡负荷'
              } else if (params.color === '#68C4FD') {
                name = '满足90%需量'
              } else if (params.color === '#FF5227') {
                name = '满足85%需量'
              } else if (params.color === '#AE716E') {
                name = '满足95%需量'
              } else if (params.color === '#44D428') {
                name = '月最大需量'
              } else {
                name = '月最大需量'
              }
              // { xAxis: that.origin.adviceValue? that.origin.adviceValue:-1, lineStyle: { color: '#3B8AE8' } },
              // { xAxis: that.origin.maxValue? that.origin.maxValue:-1, lineStyle: { color: '#7AD354' } },
              // { xAxis: that.origin.minValue? that.origin.minValue:-1, lineStyle: { color: '#F3A140' } },
              // { xAxis: that.origin.loadValue? that.origin.loadValue:-1, lineStyle: { color: '#B06EF3
              return (
                `<div style='padding:10px'>
                <span>${params.marker}</span>
                ${name}：${params.value} kW
                </div>`
              )
            }
          },
          // axisPointer: {
          //   show: true,
          //   type: 'cross',
          //   lineStyle: {
          //     type: 'dashed',
          //     width: 1
          //   }
          // }
        },
        xAxis: [
          {
            //  坐标轴名称。
            name: "kW",
            // 坐标轴名称的文字样式。
            nameTextStyle: {
              padding: [28, 0, 0, 15]
            },
            type: 'value',
            max: () => {
              return that.origin.loadValue && that.origin.maxValue ? this.floor_ceil(parseInt(Math.max(that.origin.maxValue, that.origin.loadValue)), 1) : null
            },
            min: () => {
              // let max = that.origin.loadValue && that.origin.maxValue ? this.floor_ceil(parseInt(Math.max(that.origin.maxValue, that.origin.loadValue)), 1) : null

              let min = that.origin.demandData ? that.origin.demandData.map((item, index) => {
                return [item.actualValue]
              }) : 0
              let minber = that.origin.minValue ? Math.min(that.origin.minValue, Math.min(...min)) : null

              // let m = (max-minber)/10
              // console.log(minber)
              // console.log(minber-m)
              // console.log(this.floor_ceil(483,-0))
              // console.log(this.floor_ceil(that.origin.minValue,-1))
              return that.origin.minValue ? this.floor_ceil(parseInt(minber), -1) : null
            },
            scale: true,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 1
              }
            },
            axisTick: {
              show: false
            },
          }
        ],

        yAxis: [
          {
            //  坐标轴名称。
            name: "频度",
            // 坐标轴名称的文字样式。
            nameTextStyle: {
              padding: [0, 30, 20, 0]
            },
            type: 'value',
            min: 0,
            minInterval: 1,
            scale: true,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              // 是否显示
              show: true,
              lineStyle: {
                color: "#e5e5e5",
                //分隔线的类型 可选'solid' 'dashed''dotted'
                type: "dotted"
              },
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 0
              }
            },
            axisTick: {
              show: false
            },
          }
        ],
        series: [
          {
            name: '中国',
            type: 'scatter',
            data: that.origin.demandData ? that.origin.demandData.map((item, index) => {
              return [item.actualValue, item.frequency]
            }) : [],
            markArea: {
              silent: true,
              itemStyle: {
                normal: {
                  color: 'transparent',
                  // borderWidth: 1,
                  // borderType: 'dashed'
                }
              },
              data: [[{
                // name: '女性分布区间',
                // xAxis: 'min',
                // yAxis: 'min'
              }, {
                // xAxis: 'max',
                // yAxis: 'max'
              }]]
            },
            markPoint: {
              data: [
                // {type : 'max', name: '最大值'},
                // {type : 'min', name: '最小值'}
              ]
            },
            markLine: {
              symbolSize: 0,
              lineStyle: {
                normal: {
                  type: 'solid'
                }
              },
              label: {
                show: false
              },
              data: [
                { xAxis: that.origin.demand85Value ? that.origin.demand85Value : -1, lineStyle: { color: '#FF5227', width: '2' } },

                { xAxis: that.origin.adviceValue ? that.origin.adviceValue : -1, lineStyle: { color: '#68C4FD', width: '2' } },

                { xAxis: that.origin.demand95Value ? that.origin.demand95Value : -1, lineStyle: { color: '#AE716E', width: '2' } },

                { xAxis: that.origin.maxValue ? that.origin.maxValue : -1, lineStyle: { color: '#44D428 ', width: '2' } },
                { xAxis: that.origin.minValue ? that.origin.minValue : -1, lineStyle: { color: '#FF9200', width: '2' } },
                { xAxis: that.origin.loadValue ? that.origin.loadValue : -1, lineStyle: { color: '#B06EF3', width: '2' } },
              ]
            }
          },
        ]

      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, false)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.r_color = this.rgba_color(this.color)
  },
  methods: {
    floor_ceil(n, fc) {
      let nn = parseInt(n)
      if (nn <= 100) {
        return 100
      }
      else if (nn <= 1000) {
        return (parseInt(nn / 100) + 0) * 100
      }
      else if (nn <= 10000) {
        return (parseInt(nn / 100) + fc) * 100
      }
      else if (nn <= 100000) {
        return (parseInt(nn / 1000) + fc) * 1000
      }
      else {
        return nn
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
    rgba_color(color) {
      var color_arr = []
      for (let i = 0; i < color.length; i++) {
        let num = color[i].split("#")[1]
        color_arr.push({
          a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
          b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.1)`
        })
      }
      return color_arr
    }
  }
}
</script>
